<template>
  <div class="app-container">
    <Ht-search-form
      :dictMap="dictMap"
      :queryParams="queryParams"
      :outputQueryParams="queryParams"
      :formOptions="formOptions"
      :advOptions="advOptions"
      permission="user:configInfo:view"
    ></Ht-search-form>
    <ht-table
      ref="dataTable"
      :multi-select="true"
      :dictMap="dictMap"
      :tableBindColumns="tableBindColumns"
      :reqConfig="regConfig"
      :queryParams="queryParams"
      :opButtonList="opButtonList"
    >
      <template v-slot:operate>
        <el-table-column
          :label="$t('common.operation')"
          align="center"
          width="160"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleDetail(scope.row)"
              >{{ $t("common.details") }}
            </el-button>
          </template>
        </el-table-column>
      </template>
    </ht-table>

    <!-- 操作日志详情对话框 -->
    <el-dialog :title="title" center  :visible.sync="open" width="70%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item
          :label="$t('authority.operLogInfo.form.systemModule')"
          prop="title"
        >
          <el-input
            v-model="form.title"
            :placeholder="$t('authority.operLogInfo.rules.systemModulePLH')"
            readonly="readonly"
          />
        </el-form-item>

        <el-form-item
          :label="$t('authority.operLogInfo.form.operName')"
          prop="operName"
        >
          <el-input
            v-model="form.operName"
            :placeholder="$t('authority.operLogInfo.rules.operNamePLH')"
            readonly="readonly"
          />
        </el-form-item>

        <el-form-item
          :label="$t('authority.operLogInfo.form.operUrl')"
          prop="operUrl"
        >
          <el-input
            v-model="form.operUrl"
            :placeholder="$t('authority.operLogInfo.rules.operUrlPLH')"
            readonly="readonly"
          />
        </el-form-item>

        <el-form-item
          :label="$t('authority.operLogInfo.form.operMethod')"
          prop="operMethod"
        >
          <el-input
            v-model="form.operMethod"
            :placeholder="$t('authority.operLogInfo.rules.operMethodPLH')"
            readonly="readonly"
          />
        </el-form-item>

        <el-form-item
          :label="$t('authority.operLogInfo.form.operParam')"
          prop="operParam"
        >
          <template>
            <json-view :data="form.operParam" />
          </template>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">{{ $t("common.cancel") }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import jsonView from "vue-json-views";
import {
  apiUrlConfig,
  listOperLogInfo,
  delOperLog,
  clearOperLog,
  qryDetail,
} from "@/api/authority_app/log/operLogInfo";
import { listPageMixin } from "@/libs/listPageMixin";

export default {
  name: "operLogInfo",
  components: { jsonView },
  mixins: [listPageMixin],
  data() {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      //子项目弹出层标题
      titleChild: "",
      // 是否显示子项目弹出层
      openChild: false,
      // 状态数据字典
      statusOptions: [],
      opButtonList: () => {
        return [
          {
            label: this.$t("common.delete"),
            type: "danger",
            icon: "el-icon-delete",
            permission: "user:operLog:remove",
            actionType: "del",
          },
          {
            label: this.$t("authority.operLogInfo.form.empty"),
            type: "danger",
            icon: "el-icon-delete",
            permission: "user:operLog:remove",
            clickFun: () => {
              this.handleClear();
            },
          },
        ];
      },
      // 查询参数
      queryParams: {
        title: "",
        operName: "",
        operRemark: "",
        beginTime: "",
        endTime: "",
      },
      regConfig: apiUrlConfig,
      // 列信息
      tableBindColumns: [
        {
          label: this.$t("authority.operLogInfo.form.systemModule"),
          prop: "title",
        },
        {
          label: this.$t("authority.operLogInfo.form.operMethod"),
          prop: "operMethod",
        },
        {
          label: this.$t("authority.operLogInfo.form.operRemark"),
          prop: "operRemark",
        },
        {
          label: this.$t("authority.operLogInfo.form.operator"),
          prop: "operName",
        },
        {
          label: this.$t("authority.operLogInfo.form.deptName"),
          prop: "deptName",
        },
        { label: this.$t("authority.operLogInfo.form.operIp"), prop: "operIp" },
        {
          label: this.$t("authority.operLogInfo.form.status"),
          prop: "status",
          dictCode: "SUCCESS_FAIL_STATUS",
        },
        {
          label: this.$t("authority.operLogInfo.form.operTime"),
          prop: "operTime",
          visible: true,
          width: "180",
        },
      ],
      // 表单参数
      form: {},
      // 子项目表单
      formChild: {},
      // 表单校验
      rules: {},
      formOptions: [],
      advOptions: [],
      searchFormDictList: ["sys_yes_no", "SUCCESS_FAIL_STATUS"],
    };
  },
  mounted() {
    const formOptions = [
      // 普通搜索
      {
        type: "input",
        prop: "title",
        defaultAttr: {
          size: "small",
          label: this.$t("authority.operLogInfo.form.systemModule"),
          placeholder: this.$t("authority.operLogInfo.rules.systemModulePLH"),
        },
      },
      {
        type: "input",
        prop: "operName",
        defaultAttr: {
          size: "small",
          label: this.$t("authority.operLogInfo.form.operator"),
          placeholder: this.$t("authority.operLogInfo.rules.operaterPLH"),
        },
      },
      {
        type: "input",
        prop: "operRemark",
        defaultAttr: {
          size: "small",
          label: this.$t("authority.operLogInfo.form.operRemark"),
          placeholder: this.$t("authority.operLogInfo.rules.operRemarkPLH"),
        },
      },
    ];
    const advOptions = [
      {
        type: "dates",
        nameObj: {
          startTimeName: "beginTime",
          endTimeName: "endTime",
        },
        defaultAttr: {
          size: "small",
          label: this.$t("authority.operLogInfo.form.operTime"),
          format: "yyyy-MM-dd",
          valueFormat: "yyyy-MM-dd",
          placeholder: [
            this.$t("authority.operLogInfo.rules.beginPLH"),
            this.$t("authority.operLogInfo.rules.endPLH"),
          ],
        },
      },
    ];
    this.formOptions = formOptions;
    this.advOptions = advOptions;
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      this.$refs.dataTable.doQuery(true);
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.beginTime = "";
      this.queryParams.endTime = "";
    },

    /** 查询日志详情 */
    handleDetail(row) {
      const dictId = row.id;
      qryDetail(dictId).then((response) => {
        this.form = response.result;
        if (this.form) {
          this.form.operParam = JSON.parse(this.form.operParam);
        }
        this.open = true;
        this.title = this.$t("authority.operLogInfo.form.lookOperate");
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const dictIds = row.id || this.ids;
      this.$confirm(
        this.$t("authority.operLogInfo.rules.deleteTip", { val: dictIds }),
        this.$t("authority.operLogInfo.form.warning"),
        {
          confirmButtonText: this.$t("common.confirm"),
          cancelButtonText: this.$t("common.cancel"),
          type: "warning",
        }
      )
        .then(function () {
          return delOperLog(dictIds);
        })
        .then(() => {
          this.$refs.dataTable.doQuery();
          this.msgSuccess(this.$t("common.deleteSuccess"));
        })
        .catch((action) => {});
    },
    handleClear() {
      this.$confirm(
        this.$t("authority.operLogInfo.rules.emptyTip"),
        this.$t("authority.operLogInfo.form.warning"),
        {
          confirmButtonText: this.$t("common.confirm"),
          cancelButtonText: this.$t("common.cancel"),
          type: "warning",
        }
      )
        .then(function () {
          return clearOperLog();
        })
        .then(() => {
          this.$refs.dataTable.doQuery();
          this.msgSuccess(this.$t("authority.operLogInfo.rules.emptySuccess"));
        });
    },
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm(
        this.$t("authority.operLogInfo.rules.exportTip"),
        this.$t("authority.operLogInfo.form.warning"),
        {
          confirmButtonText: this.$t("common.confirm"),
          cancelButtonText: this.$t("common.cancel"),
          type: "warning",
        }
      )
        .then(function () {
          return listOperLogInfo(queryParams, true);
        })
        .then((res) => {
          console.log(res);
          this.downloadFile(res.fileId);
        });
    },
    cancel() {
      this.open = false;
    },
  },
};
</script>
